<?php
if ($user_permission == 0 || $user_permission == 1 || $user_permission == 2) {
    ?>
    <div class="page-content">
        <div class="page-content-pricing">
            <div class="shortcodes-hdr">
                <div class="shortcodes-hdr-lbl"><?php echo $current_user[0]->name; ?></div>
                <div class="shortcodes-hdr-lbl-a">Hello, you're in Graphic Land</div>
            </div>
            <div class="shortcodes-content">
                <div class="shorcodes">
                    <div class="short-lbl">About you</div>

                    <div class="tabs">
                        <div class="tabs-cntl">
                            <a class="current" href="#">Personal Information</a>
                            <a href="#">Edit</a>
                            <a href="#">Change password</a>

                            <div class="clear"></div>
                        </div>
                        <div class="tabs-content">
                            <div class="tabs-content-a">
                                <table class="table-a" style="width: 400px">
                                    <tr>
                                        <th>ID</th>
                                        <td><?php echo $current_user[0]->id; ?></td>
                                    </tr>
                                    <tr>
                                        <th>Email</th>
                                        <td><?php echo $current_user[0]->email; ?></td>
                                    </tr>
                                    <tr>
                                        <th>Telephone</th>
                                        <td><?php echo $current_user[0]->tel; ?></td>
                                    </tr>
                                    <tr>
                                        <th>Permission</th>
                                        <td><?php
                                            if ($user_permission == 0) {
                                                echo "Administrator";
                                            } else if ($user_permission == 1) {
                                                echo "Client";
                                            } else if ($user_permission == 2) {
                                                echo "Author";
                                            }
                                            ?>
                                        </td>
                                    </tr>
                                </table>
                                <div id="container" style="width:80%; height:400px;"></div>
                            </div>
                            <div class="tabs-content-a">
                                <form id="change_info" method="post">
                                    <input name="id" value="<?php echo $current_user[0]->id; ?>" hidden="hidden">
                                    <table class="table-a" style="width: 400px">
                                        <tr>
                                            <th>Name</th>
                                            <td><input name="name" type="text"
                                                       value="<?php echo $current_user[0]->name; ?>"></td>
                                        </tr>
                                        <tr>
                                            <th>Email</th>
                                            <td><input name="email" type="text"
                                                       value="<?php echo $current_user[0]->email; ?>"></td>
                                        </tr>
                                        <tr>
                                            <th>Telephone</th>
                                            <td><input name="tel" type="text"
                                                       value="<?php echo $current_user[0]->tel; ?>">
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="buttons">
                                        <a id="save_info" class="btn-small">Save</a>
                                        <?php
                                        if ($user_permission == 1) {
                                            echo '<a id="upgrade" class="btn-small">Upgrade Account</a>';
                                        }
                                        ?>
                                    </div>
                                </form>
                            </div>
                            <div class="tabs-content-a">
                                <form id="change_pw">
                                    <input name="id" value="<?php echo $current_user[0]->id; ?>" hidden="hidden">
                                    <table class="table-a" style="width: 400px">
                                        <tr>
                                            <th>Current password</th>
                                            <td style="width: 180px"><input name="old_pw" type="password"></td>
                                        </tr>
                                        <tr>
                                            <th>New password</th>
                                            <td style="width: 180px"><input id="password" name="password"
                                                                            type="password"></td>
                                        </tr>
                                        <tr>
                                            <th>Confirm Password</th>
                                            <td style="width: 180px"><input name="confirm_password" type="password">
                                            </td>
                                        </tr>
                                    </table>
                                    <div class="buttons">
                                        <a id="save_pw" class="btn-small">Save</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>


                </div>

                <div class="clear"></div>

            </div>
        </div>
    </div>
    <script>
        $('#save_info').click(function () {
            $.post('/profile/update_info', $('#change_info').serialize())
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $('.tabs-content-a').eq(1).prepend('<div class="message-boxes">' +
                            '<div class="shorcodes" style="width: 400px">' +
                            '<div class="message msg-information"><span>Successfully</span></div>' +
                            '</div>' +
                            '<div class="clear"></div>' +
                            '</div>');
                    }
                    else {
                        $('.table-content-a').eq(1).prepend('<div class="message-boxes">' +
                            '<div class="shorcodes" style="width: 400px">' +
                            '<div class="message msg-msg-error"><span>Unsuccessfully</span></div>' +
                            '</div>' +
                            '<div class="clear"></div>' +
                            '</div>');
                    }
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                });
        });

        $('#save_pw').click(function () {
            $.post('/profile/update_password', $('#change_pw').serialize())
                .done(function (data) {
                    if (parseInt(data) == 1) {
                        $('.tabs-content-a').eq(2).prepend('<div class="message-boxes">' +
                            '<div class="shorcodes" style="width: 400px">' +
                            '<div class="message msg-information"><span>Successfully, please log on again</span></div>' +
                            '</div>' +
                            '<div class="clear"></div>' +
                            '</div>');
                        setTimeout(function () {
                            location.href = '/logout';
                        }, 1000);
                    }
                    else {
                        $('.table-content-a').eq(2).prepend('<div class="message-boxes">' +
                            '<div class="shorcodes" style="width: 400px">' +
                            '<div class="message msg-msg-error"><span>Unsuccessfully</span></div>' +
                            '</div>' +
                            '<div class="clear"></div>' +
                            '</div>');
                    }

                });
        });

        $('#upgrade').click(function () {
            if (confirm('Do you want to upgrade your account?')) {
                $.post('/profile/upgrade')
                    .done(function (data) {
                        setTimeout(function () {
                            location.reload();
                        }, 1000)

                    });
            }
        });

        $(document).ready(function () {
            $('#change_pw').validate({
                rules: {
                    old_pw: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    confirm_password: {
                        required: true,
                        equalTo: "#password"
                    }
                }
            });
        })
    </script>
<?php
} else redirect('http://localhost', false);
?>
<script>
    var d = new Date();
    var chart1;
    var year = new Date().getFullYear();
    $(function () {
        chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line'
            },
            title: {
                text: 'Income in ' + year
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Income ($)'
                }
            },
            series: [
                {
                    name: 'Income in month',
                    data: [<?php echo $income; ?>]
                }
            ]
        });
    });
</script>